<!--<!DOCTYPE html>-->
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			body {
				background-color: #4A4A4A;
			}
			
			#main {
				/*min-width: 830px;*/
				max-width: 1200px;
				width: 100%;
				position: relative;
				height: 590px;
			}
			
			#title {
				width: 100%;
				height: 45px;
				background-color: #468AE5;
				font-family: "微软雅黑";
				font-size: 20px;
				font-weight: bold;
				color: white;
				line-height: 45px;
				text-indent: 20px;
			}
			
			#left_nav {
				float: left;
				width: 190px;
				min-height: 505px;
				overflow: auto;
				background-color: #FFFFFF;
			}
			
			#left_nav ul {
				list-style-type: none;
				margin-top: 15px;
			}
			
			#left_nav ul li {
				height: 44px;
				line-height: 44px;
				font-size: 14px;
				font-family: "微软雅黑";
				box-sizing: border-box;
			}
			
			.bgcol1 {
				background-color: #93C4FE;
			}
			
			#left_nav ul li img {
				float: left;
				margin: 10px;
			}
			
			#left_nav ul li div {
				float: left;
				width: 5px;
				height: 44px;
			}
			
			.bgcol2 {
				background-color: #5B9CE8;
			}
			
			#left_nav ul li:hover {
				cursor: pointer;
			}
			
			.cle {
				clear: both;
			}
			
			#zhong {
				width: 100%;
				max-width: 950px;
				min-height: 505px;
				overflow: auto;
				position: absolute;
				left: 190px;
				background-color: #FFFFFF;
				display: block;
				margin-left: 0px;
			}
			
			#zhong_title {
				width: 100%;
				height: 40px;
				background-color: #FFFFFF;
			}
			
			#zhong_title div {
				float: left;
				text-align: center;
				width: 25%;
				line-height: 40px;
				color: #A7A7A7;
				font-family: "微软雅黑";
				font-size: 12px;
				font-weight: bold;
			}
			
			#song_list {
				max-height: 400px;
				overflow: auto;
				border-top: 2px solid #EEEEEE;
				border-bottom: 2px solid #EEEEEE;
			}
			
			#song_list>div {
				width: 100%;
				height: 50px;
				border-bottom: 1px solid #EEEEEE;
			}
			
			#song_list>div:hover {
				background-color: #F4F7FA;
			}
			
			#song_list>div div {
				float: left;
				font-family: "微软雅黑";
				font-size: 14px;
				width: 25%;
				text-align: center;
				height: 50px;
				line-height: 50px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			
			#footer {
				position: fixed;
				bottom: 0px;
				left: 0px;
				width: 100%;
				min-width: 950px;
				height: 85px;
				background-color: #353C46;
			}
			
			#leftpanel ul {
				list-style-type: none;
				margin-left: 15px;
			}
			
			#leftpanel ul li {
				float: left;
				margin: 20px 10px;
				height: 46px;
				line-height: 46px;
			}
			
			#time {
				color: #969696;
				font-size: 12px;
				float: left;
				margin-top: 45px;
				margin-left: 15px;
			}
			
			#jdt {
				float: left;
				width: 500px;
				height: 5px;
				margin-top: 50px;
				margin-left: 20px;
				background-color: #CECFD4;
			}
			
			#jindu {
				width: 0px;
				height: 5px;
				background-color: #3792EF;
			}
			
			.active {
				background-color: #F4F7FA;
			}
			
			#xunhuan {
				background-image: url(img/顺序播放.png);
				width: 18px;
				height: 15px;
				float: left;
				margin-top: 45px;
				margin-left: 30px;
			}
			
			#yinliang {
				float: left;
				width: 18px;
				height: 15px;
				margin-top: 45px;
				margin-left: 20px;
			}
			
			#yin {
				margin-top: 50px;
				margin-left: 5px;
				float: left;
				width: 80px;
				height: 5px;
				background-color: #969696;
			}
			
			#yin-1 {
				height: 5px;
				background-color: #3792EF;
			}
			
			#ztks {
				width: 48px;
				height: 48px;
			}
			
			#right {
				width: 250px;
				height: 100%;
				min-height: 505px;
				position: absolute;
				right: 0px;
				background-color: #FFFFFF;
			}
		</style>
	</head>

	<body>
		<div id="title">
			Baidu 音乐
		</div>
		<div id="main">
			<div id="left_nav">
				<ul>
					<li onclick="lieb()">
						<div></div><img src="img/临时列表.png" />播放列表</li>
					<li onclick="his()" class="cle">
						<div></div><img src="img/历史记录2.png" />播放记录</li>
					<li class="cle">
						<div></div><img src="img/最近常听.png" />拖放可添加本地音乐</li>
				</ul>
			</div>
			<div id="zhong">
				<div id="zhong_title">
					<div>歌曲</div>
					<div>歌手</div>
					<div>专辑</div>
					<div></div>
				</div>
				<div id="song_list"></div>
			</div>
			

			<div id="footer" class="cle">
				<audio id="audio" ontimeupdate="weizhi()" oncanplay="canplay()"></audio>
				<div id="leftpanel">
					<ul>
						<li onclick="shang()"><img src="img/上一首.png" /></li>
						<li id="ztks" onclick="ztks()"><img src="img/开始.png" /></li>
						<li onclick="next()"><img src="img/下一首.png" /></li>
					</ul>
				</div>
				<div id="jdt" onclick="jd(event)">
					<div id="jindu"> </div>
				</div>
				<div id="time">
					<span id="settime">00:00</span>/<span id="sumtime">00:00</span>
				</div>
				<div id="xunhuan" onclick="xunhuan()">
				</div>
				<div id="yinliang">
					<img src="img/声音.png" />
				</div>
				<div id="yin" onclick="yinliang(event)">
					<div id="yin-1"></div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/MusicItem.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var s = document.getElementById("audio");
		s.volume = "0.5";
		var index = 0;
		var xhtype = 0;
		var kgtype = 0;
		var hislis = Mushistory.items;
		var th = document.getElementById("ztks");
		(function() {
			$("#left_nav li").click(function() {
				$("#left_nav li").removeClass("bgcol1");
				$("#left_nav li div").removeClass("bgcol2");
				$(this).addClass("bgcol1");
				$(this).children().eq(0).addClass("bgcol2");
			})
		})()

		function lieb() {
			var lis = Music.items;
			var $sl = $("#song_list");
			$sl.html("");
			for(var i in lis) {
				$sl.append('<div data-url=' + lis[i].url + '><div class="song">' + lis[i].title + '</div><div class="singer">' + lis[i].author + '</div><div class="zhuanji">' + lis[i].zhuanji + '</div><div></div></div>')
			}
			var $div = $("#song_list>div");
			dianji();
		}

		function his() {
			var $sl = $("#song_list");
			$sl.html("");
			for(var i in hislis) {
				$sl.append('<div data-url=' + hislis[i].url + '><div class="song">' + hislis[i].title + '</div><div class="singer">' + hislis[i].author + '</div><div class="zhuanji">' + hislis[i].zhuanji + '</div><div></div></div>')
			}
			var $div = $("#song_list>div");
			dianji();
		}

		function dianji() {
			lis = document.getElementById("song_list").children;
			for(var i = 0; i < lis.length; i++) {
				(function(ix) {
					lis[i].onclick = function() {
						for(var j in lis) {
							lis[j].className = "";
						}
						s.src = this.getAttribute("data-url");
						this.className = "active";
						s.play();
						index = ix;
						th.innerHTML = '<img src="img/暂停.png" />';
						kgtype = 1;
						var child = this.children;
						var a = {
							"title": child[0].innerHTML,
							"author": child[1].innerHTML,
							"zhuanji": child[2].innerHTML,
							"url": this.getAttribute("data-url")
						};
						for(var l in hislis) {
							if(hislis[l].url == a.url) {
								hislis.splice(l, 1);
								hislis.unshift(a);
								var h = 1;
							}
						}
						if(h != 1) {
							hislis.unshift(a);
						}
					}
				})(i)
			}
		}

		function ztks() {
			if(kgtype == 1) {
				s.pause();
				th.innerHTML = '<img src="img/开始.png" />';
				kgtype = 0;
			} else {
				kgtype = 1;
				th.innerHTML = '<img src="img/暂停.png" />';
				if(s.src) {
					s.play();
				} else {
					lieb();
					lis[0].click();
				}

			}
		}

		function timejisuan(time) {
			var minute = parseInt(time / 60);
			var second = parseInt(time % 60);
			return t = (minute > 10 ? minute : ("0" + minute)) + ":" + (second > 10 ? second : ("0" + second))
		}

		function canplay() {
			var sumtime = document.getElementById("sumtime");
			sumtime.innerHTML = (timejisuan(s.duration));
		}

		function weizhi() {
			var settime = document.getElementById("settime");
			settime.innerHTML = (timejisuan(s.currentTime));
			document.getElementById("jindu").style.width = parseInt(s.currentTime / s.duration * 500) + "px";
			if(s.currentTime == s.duration) { //歌曲播放完
				//xhtype:0列表循环 1 单曲循环 2随机播放
				switch(xhtype) {
					case 0:
						next();
						break;
					case 1:
						s.load();
						s.play();
						break;
					case 2:
						index = parseInt(Math.random() * lis.length);
						console.log(index);
						lis[index].click();
						break;
					default:
						break;
				}
			}
		}

		function jd(event) {
			s.currentTime = event.offsetX / 500 * s.duration;
		}

		function next() {
			index++;
			if(index >= lis.length) {
				index = 0;
			}
			lis[index].click();
		}

		function shang() {
			index--;
			if(index < 0) {
				index = lis.length - 1;
			}
			lis[index].click();
		}

		function xunhuan() {
			xhtype++;
			if(xhtype > 2) {
				xhtype = 0;
			}
			switch(xhtype) {
				case 0:
					$("#xunhuan").css("background-image", "url(img/顺序播放.png)");
					break;
				case 1:
					$("#xunhuan").css("background-image", "url(img/单曲循环.png)");
					break;
				case 2:
					$("#xunhuan").css("background-image", "url(img/随机播放.png)");
					break;
				default:
					break;

			}

		}

		function yinliang(event) {
			$("#yin-1").css("width", event.offsetX);
			s.volume = parseInt($("#yin-1").css("width")) / parseInt($("#yin").css("width"));
		}

		var zhong = document.getElementById("zhong");
		zhong.ondragenter = function(e) {
			e.stopPropagation();
			e.preventDefault();
		}
		zhong.ondragover = function(e) {
			e.stopPropagation();
			e.preventDefault();
		}
		zhong.ondrop = function(e) {
			e.stopPropagation(); //阻止冒泡事件
			e.preventDefault(); //阻止默认事件
			var lis = Music.items;
			if(e.dataTransfer.files.length > 0) {
				var files = e.dataTransfer.files;
				for(var i = 0; i < files.length; i++) {
					var fil = new FileReader();
					var name = files[i].name
					fil.onload = function(e) {
						var a = {
							"title": name,
							"author": "佚名",
							"zhuanji": "未知",
							"url": e.target.result
						}
						lis.unshift(a);
						lieb();
						document.getElementById("song_list").children[0].click();
					};

					fil.readAsDataURL(files[i]);
				}

			}
		}
	</script>

</html>